//使用path模块
var path = require('path');
var Root_Path = path.resolve(__dirname);

//插件会记录一些编译的信息，并可以配置生成html
var htmlWebpackPlugin = require('html-webpack-plugin');



//将style-loader内联的css分离
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//定义项目部署地址，也用于hmr
var hmw_port = 8090;
var project_name = __dirname.substring(__dirname.lastIndexOf('/'));
var base_path = "http://localhost:" + hmw_port  + project_name + "/dist/";

var webpack = require('webpack');

console.log("************** " + project_name + " ***************");

module.exports = {
    //解决fs module not found
    node: {
        fs: "empty"
    },
    /*
     * 入口文件, 每一个json条目表示一个chunk，可以在htmlWebpackPlugin中引用
     * 这样就可以按需引用
     */
    entry: {
        main: path.resolve(Root_Path, 'react/App'),
    },
    /**
     * 这样上面的就不用写后缀名了
     */
    resolve: {
        extensions:['.js', '.jsx', '.tsx', '.ts']
    },
    /*
     * 输出文件
     * path 表示输出路径
     * filename 表示输出的文件名
     * publicpack，表示输出文件的引用路径的基地址，
     * 如 main（./src/script/App.js)将会被输出到_dirname/disk/js/name-hash.js,htmlWebpackPlugin引用这个chunk时，路径则是base_path/filename
     */
    output: {
        path: path.resolve(Root_Path, 'react/build'),
        filename: 'js/[name].js',
        //配置输出的文件引用的访问地址
        publicPath: '/'
    },
    /**
     * 配置开发服务器
     */
    devServer: {
        // enable HMR on the server
        hot: true,
        //从contentBase里读取内容（http:localhost:port/publicPath/build -> contentBase/build)
        contentBase: path.resolve(Root_Path, 'react/build'),
        // 部署在http://localhost:port/publicpath,要和上面output的publicPath一致
        publicPath: '/',
        inline: true,
        port: hmw_port,
        //代理，webServer是一个静态的server，这里配置代理，使得webServer的路由和react-router的路由一致
        proxy: {
            '/**': {  //catch all requests
                target: '/App.html',  //default target
                secure: false,
                bypass: function(req, res, opt){
                    //your custom code to check for any exceptions
                    //console.log('bypass check', {req: req, res:res, opt: opt});
                    if (/(\/$)|(\/about$)/.test(req.path)) {
                        return '/App.html'
                    }
                }
            }
        }
    },
    //定义loader,将scss，jxs等交给loader处理，然后输出
    module: {

        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query : {
                    plugins: [
                        ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
                    ]
                }
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_module/
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader',
                        'sass-loader?outputStyle=expanded'
                    ]
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader',
                        'less-loader'
                    ]
                })
            },
            {
                test: /\.html$/,
                //将html输出成一个string
                loader: ['html-loader']
            },
            {
                test: /\.ejs$/,
                loader: ['ejs-loader']
            },
            /*
             * css，html href中，可以直接引用url，js中需要require一下，这样就可以将图片的url改成对应的url
             * 图片将被输出到output.path/name
             * ejs 中的url也需要require一下。
             */
            {
                test: /\.(png|jpg)$/,
                loaders: [
                    'url-loader?limit=1000&name=assets/[name].[ext]',
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [
        /**
         * 可以引用多次，这样多个html可以分别配置
         * inlineSource: 'initial.*\.js' //使用内联的形式插入所有以initial开头的脚本，这里不是chunk名，是最终生成的js文件名,需要htmlWebpackInlineSourcePlugin
         * excludeChunks:[main] //除了main这个chunk，其他都引入
         */

        new htmlWebpackPlugin({
            template: 'App.ejs',//模版的名字
            filename: 'App.html',//最终生成的文件名，根目录为output的path
            title: 'advanced google search shortcuts',
            inject: 'body', //注入位置 true和body表示注入在body后面，head表示在head处注入，false表示不注入
            chunks: ['main'], //引用某个chunk
        }),

        new webpack.HotModuleReplacementPlugin(),
        // enable HMR globally

        new webpack.NamedModulesPlugin(),
        // prints more readable module names in the browser console on HMR updates
        new ExtractTextPlugin("styles/[name].css"),//分离内联的css，打包成独立的css,按chunk输出

        new webpack.SourceMapDevToolPlugin({
            filename: 'js/[name].js.map',
            exclude: ['vendor.js']
        })
    ]
}
